<template>
 <div class="register">
   <!-- 步骤条 -->
   <div class="register-steps">
      <van-steps :active="active">
         <van-step>验证手机号</van-step>
         <van-step>发送验证码</van-step>
         <van-step>注册账号</van-step>
         <van-step>完成注册</van-step>
      </van-steps>
   </div>
   <!-- 注册表单 -->
   <div class="register-content" v-if="active < 3">
      <van-form>
         <!-- 验证手机号 -->
         <van-cell-group inset>
            <van-field
               v-model="phone"
               name="phone"
               label="手机号"
               placeholder="请输入手机号"
               :rules="[{ required: true, message: '请输入手机号' }]"
            />
         </van-cell-group>

         <!-- 手机发送验证码 -->
         <van-cell-group inset v-if="active === 1">
            <van-field
               v-model="code"
               center
               clearable
               label="短信验证码"
               placeholder="请输入短信验证码"
            >
               <template #button>
                  <van-button 
                  size="small" 
                  type="primary" 
                  @click="getCode"
                  :disabled="this.time !== 0"
                  >发送验证码{{ this.time !== 0 ? '('+ this.time + ')' : '' }}</van-button>
               </template>
            </van-field>
         </van-cell-group>

         <!-- 手机号，密码 -->
         <van-cell-group inset v-if="active === 2">
            <van-field 
               v-model="password"
               name="password"
               type="password"
               label="密码"
               placeholder="请输入密码" 
            />
         </van-cell-group>

         <div style="margin: 16px;">
            <!-- 第一步按钮 -->
            <van-button round block type="primary" @click="verifyPhone" v-if="active === 0">
               验证手机号
            </van-button>
            <!-- 第二步按钮 -->
            <van-button round block type="primary" @click="verifyCode" v-if="active === 1">
               下一步
            </van-button>
            <!-- 第三步按钮 -->
            <van-button round block type="primary" @click="handleRegister" v-if="active === 2">
               注册
            </van-button>
         </div>
      </van-form>
   </div>

   <!-- 注册成功提示 -->
    <div class="success" v-else>
      恭喜您, 注册成功！
      <router-link to="/login">去登录</router-link>
   </div>
 </div>
</template>

<script>
import { showFailToast, showSuccessToast } from 'vant'
import { verifyPhone, fetchCode, checkCode, register } from '../../api/register'
export default {
 name: 'register',
 data() {
    return {
      active: 0, // 步骤开始初始值
      phone: '', // 手机号
      code: '',  // 验证码
      password: '', // 密码
      time: 0, // 按钮倒计时
    }
 },
 methods: {
   // 验证手机号
   async verifyPhone(){
      //  发送网络请求
      const { status, message} = await verifyPhone(this.phone)
      //console.log(status)
      // 判断当前手机号是否为注册，200已注册，404微博注册
      if(status === 200){
         showFailToast({
            message,
            duration: 2000
         })
         return
      }
      this.active += 1
   },
   // 获取验证码
   async getCode(){
      // 设定初始倒计时
      this.time = 60
      // 启动定时器
      this.timer = setInterval(() => {
         this.time -= 1
         if(this.time <= 0){
            clearInterval(this.timer)
         }
      }, 1000)
      const result = await fetchCode(this.phone)
      // console.log(result)
      showSuccessToast({
         message: '验证码:' + result.code,
      })
   },
   // 校验验证码
   async verifyCode(){
      const {status, message} = await checkCode(this.phone, this.code)
      //console.log(status)
      if(status === 200){
         this.active += 1
         return
      }
      showFailToast({
         message,
      })
   },
   // 注册
   async handleRegister(){
      const {status, message} = await register(this.phone, this.password)
      //console.log(status)
      if(status === 200){
         this.active += 1
         this.setTime = setTimeout(() => {
            this.$router.push('/login')
         }, 3000)
         return
      }
      showFailToast(message)
   },
 },

//  组件卸载时，清理定时器
beforeUnmount(){
   clearInterval(this.timer)
   clearTimeout(this.setTime)
}
}
</script>

<style lang="scss" scoped>
   .register{
      width: 100%;
      height: calc(100vh - 12.26667vw);
      // background-color: rgba(217,83,65);
      background-color: #fff;
   }
   .register-content{
      margin-top: 10px;
   }
</style>
